<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>修改博文页</title>
    <script src="__STATIC__admin/js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="__STATIC__layui/css/layui.css">
    <script src="__STATIC__layui/layui.js"></script>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="__STATIC__webuploader-0.1.5/webuploader.css">

    <!--引入JS-->
    <script type="text/javascript" src="__STATIC__webuploader-0.1.5/webuploader.js"></script>

    <!--SWF在初始化的时候指定，在后面将展示-->
    <style>
             .current-color {
            background-color: #009688;
        }

        .divide-line {
            height: 45px;
            background-color: #EEF5F9;
            font-style: italic;
            font-weight: 600;
            line-height: 45px;
            font-size: 17px;
            color: #1E88E5;
        }

        .divide-line span {
            margin-left: 15px;
        }

        .layui-input, .layui-input, .layui-form-select{
            width: 750px;
        }

        /*   后加  */
        .main {
            height: 800px;
            width: 1300px;
            margin: 0 auto;
            margin-top: 10px;
            box-sizing: border-box;
            justify-content: flex-start;
        }

        .left {
float: left;
            text-align: center;
            width: 400px;
        }

        .right {
           float: right;
            width: 900px;

        }

        .prepic {
            width: 100%;
            height: 280px;
        }

        .pic {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin" style="background-color:#EEF5F9">
    <div class="layui-header">
        <div class="layui-logo"><img src="static/admin/Font_Icon/沐歌logo2.png" width="70" height="70"
        >后台管理系统
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="{$Think.session.admin['adminPic']}" class="layui-nav-img"
                         alt="{$Think.session.admin['adminName']}">
                    {$Think.session.admin['adminName']}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="personaldata">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#" onclick="loginOut()">注销</a></li>
            <script>
                function loginOut() {
                    layer.confirm('你确定要注销吗？', {
                        btn: ['确定', '算了'] //按钮
                    }, function () {
                        layer.msg('注销成功', {icon: 1});
                        setTimeout(function () {
                            location.href ="loginout";
                        },1000)
                    });
                }
            </script>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">博客信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:url('admin/blog/blogList')}">博客列表</a></dd>
                        <dd><a href="{:url('admin/blog/blogAdd')}">添加博客</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">博客栏目管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:url('admin/category/categoryList')}">栏目列表</a></dd>
                        <dd><a href="{:url('admin/category/categoryAdd')}">添加栏目</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:url('admin/user/userList')}">用户列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">留言管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:url('admin/Comment/commentList')}">评论列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">友情链接管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:url('admin/link/linkList')}">友情链接列表</a></dd>
                        <dd><a href="{:url('admin/link/linkAdd')}">添加友情链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">数据恢复中心</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:url('admin/DataRecoveryCenter/recoveryBlogList')}">博文回收站</a></dd>
                        <dd><a href="{:url('admin/DataRecoveryCenter/recoveryBlogTypeList')}">栏目回收站</a></dd>
                        <dd><a href="{:url('admin/DataRecoveryCenter/recoveryUserList')}">用户回收站</a></dd>
                        <dd><a href="{:url('admin/DataRecoveryCenter/recoveryLinkList')}">友情链接回收站</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">待定</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body ">
        <!-- 内容主体区域 -->
        <!--        辅助线starting-->
        <div class="divide-line">
            <span>修改博文</span>
        </div>
        <!--        辅助线ending-->
        <div class="main">
            <form class="layui-form" method="post">

            <div class="left">
                <div class="prepic">
                    <p style="font-size: 20px;font-weight: 600;font-style: italic">原图片</p>
                    <img src="{$data.pic}" alt="{$data.title}" id="prePic" height="250px" width="250px"
                         style="border-radius: 100%">
                </div>
                <div class="pic">
                    <p><label class="layui-form-label" id="picker" style="width: 120px;display: block;margin-left: -18px">添加封面</label>
                    </p>
                   <div id="pic" style="display: none"> <a href="#"><img id="del" src="/static/admin/Font_Icon/删除.png" width="30px" height="30px" style="margin-top: 35px
;margin-left: -10px;position: absolute"
                   ></a></div>
                    <div ><img src="" name="pic" id="avatar" alt=""
                              style="width: 250px;height:250px;border-radius: 100%;margin-left: -155px;
margin-top: 25px">
                    </div>

                </div>
            </div>
            <div class="right">
                <!--            表单令牌-->
                <input type="hidden" name="__token__" value="{$Request.token}"/>

                <div class="layui-form-item">
                    <label class="layui-form-label">修改标题</label>
                    <div class="layui-input-inline">
                        <input id="ipt" style="width: 750px" type="text" name="title" required lay-verify="required"
                               value="{$data.title}" placeholder="请输入标题..." autocomplete="off" class="layui-input"
                               maxlength="55">
                    </div>
                    <input type="hidden" value="{$data.bid}" class="layui-input" name="bid">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分区</label>
                    <div class="layui-input-inline" style="z-index: 3">
                        <select name="tid">
                            {foreach $cate_data['data'] as $item}
                            {if ($item.html!=='')}
                            <option value="{$item.tid}" {if $data.tid==$item.tid} selected {/if}>{$item.html}{$item.typename}</option>
                            {else /}
                            <option value="{$item.tid}" {if $data.tid==$item.tid} selected {/if}>{$item.typename}</option>
                            {/if}
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline" style="z-index: 2">
                        <select name="wid" lay-filter="wid">
                            {foreach $waytype as $item}
                            <option value="{$item.wid}">{$item.waytype}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="address" style="display: none">
                    <label class="layui-form-label">转载来源</label>
                    <div class="layui-input-inline" style="z-index: 1">
                        <input style="width: 750px" type="text" name="address"
                               value="{$data.address}" placeholder="请输入..." autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">置顶</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" {if ($data.top==1)}checked="" value="1" {else /}value="0" {/if} id="top"
                        name="top" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item" id="intro">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-inline" style="z-index: 1">
                        <textarea name="intro" style="width: 750px" class="layui-textarea">{$data.intro}</textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">博文内容</label>
                    <div class="layui-input-block" style="z-index: 1">
                        <textarea id="body" style="width: 750px" name="detail">{$data.detail}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn btn" lay-submit id="btn" lay-filter="go">更新</button>
                    </div>
                </div>
            </div>
            </form>
        </div>
        <!--  主体 ending     -->
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__uEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__uEditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script>
    //富文本编辑器--实例化
    var ue = UE.getEditor('body', {
        'initialFrameHeight': 400,
        'allowDivTransToP': false//阻止div转成P标签
    });

    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //常规用法
        laydate.render({
            elem: '#test1'
        });
    });

    layui.use('form', function () {
        var form = layui.form;
        form.on('submit(go)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var img = $('#avatar').attr('src');
            var prePic = $('#prePic').attr('src');
            if (img == '') {
                img = prePic;
            }
            console.log(img);
            $.ajax({
                type: 'post',
                url: "{:url('admin/blog/doEditBlog')}",
                data: {'data': data.field, 'img': img},
                dataType: "json",
                success: function (e) {
                    console.log(e);
                    var num = e.status;
                    var msg = e.msg;
                        if (num == 1) {
                            layer.msg(msg, {icon: 1});
                            setTimeout(function () {
                                window.location.href = "{:url('admin/blog/blogList')}";
                            }, 800);
                        }else{
                            layer.msg(msg, function () {
                                window.location.reload();
                            });
                        }
                    }
                });

            return false;
        });

    });
    //监听下拉框变化
    layui.use('form', function () {
        var form = layui.form;
        form.on('switch(switchTest)', function(data){
            layer.msg('置顶状态：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            if (this.checked==true){
                $(function () {
                    $('#top').val(1);
                });
                console.log($('#top').val())
            }else {
                $(function () {
                    $('#top').val(0);
                });
                console.log($('#top').val())
            }
        });
        //监听提交
        form.on('select(wid)', function (data) {
            console.log(data.value);
            if (data.value == 2) {
                $('#address').fadeIn(300).attr("required", "true");
            } else {
                $('#address').fadeOut(300);
            }
        });
    });

</script>
<script>
    //webuploader 初始化
    var uploader = WebUploader.create({

        // swf文件路径
        swf: '__STATIC__webuploader-0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: "{:url('admin/blog/upload')}",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        // 设置文件上传域的name
        fileVal: 'pic',
        // 选完文件后，是否自动上传。
        auto: true,
    });
    // 回调事件
    uploader.on('uploadSuccess', function ($file, response) {
        if (response.status == 0) {
            $('#avatar').attr('src', response.msg).fadeIn(1000);
            $('#pic').fadeIn(200);
        }
    });
    // 点击删除事件
    $('#del').click(function () {
        let img = $('#avatar').attr('src');
        // 发送ajax
        $.ajax({
            url: '{:url("admin/blog/picDel")}',
            type: 'delete',
            data: {img},
            success: ret => {
                if (ret.status == 0) {
                    layer.msg('删除成功', function () {

                    });
                    $('#avatar').hide();
                    $('#pic').hide();
                }
            }
        });
    });
</script>

</body>
</html>
